<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
	<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
	<title>Yandex-map</title>
	<link rel="stylesheet" href="./css/style.css"/>
	<script src="./js/script.js"></script>
</head>
<body>
<header class="header__container">
	<div class="container">
		<nav class="header-nav">
			<a class="logo__link" href="#"><img src="images/logo.svg" alt="логотип" class="logo"></a>
			<ul class="nav-list">
				<li class="nav-item">
					<a class="nav-link" tabindex="0" href="index.html">О нас</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" tabindex="1" href="services.html">Туры</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" tabindex="2" href="#">Скидки</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" tabindex="3" href="#">Билеты</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" tabindex="4" href="yandex-map.html">Связатья с нами</a>
				</li>
			</ul>
		</nav>
	</div>
	
	<div class="header-nav__mobile_container">
		<div class="burger">
			<span></span>
		</div>
		<nav class="header-nav__mobile">
			<ul class="nav-list__mobile">
				<li class="nav-item__mobile">
					<a class="nav-link__mobile" href="index.html">О нас</a>
				</li>
				<li class="nav-item__mobile">
					<a class="nav-link__mobile" href="services.html">Туры</a>
				</li>
				<li class="nav-item__mobile">
					<a class="nav-link__mobile" href="#">Скидки</a>
				</li>
				<li class="nav-item__mobile">
					<a class="nav-link__mobile" href="#">Билеты</a>
				</li>
				<li class="nav-item__mobile">
					<a class="nav-link__mobile" href="yandex-map.html">Связатья с нами</a>
				</li>
			</ul>
		</nav>
	</div>
</header>

<main class="yandex-map__container">
	<div class="container">
		<h1 class="map__title">Наш адрес:</h1>
		<div class="map__block">
			<p class="map__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, earum.</p>
			<div class="map__tooltip" tabindex="1">
				<div class="marker" aria-label="всплывающее окно, подсказка"></div>
				<p class="popup">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam dolor
					facere reiciendis sit? Facilis!
				</p>
			</div>
		</div>
		<div style="position:relative;overflow:hidden;filter: grayscale(1);">
			<a href="https://yandex.ru/maps/197/barnaul/?utm_medium=mapframe&utm_source=maps"
			   style="color:#eee;font-size:12px;position:absolute;top:0px;">Барнаул Яндекс Карты</a>
			<a href="https://yandex.ru/maps/197/barnaul/?ll=83.778301%2C53.348416&mode=whatshere&no-distribution=1&utm_medium=mapframe&utm_source=maps&whatshere%5Bpoint%5D=83.775382%2C53.348878&whatshere%5Bzoom%5D=17&z=14.64"
			   style="color:#eee;font-size:12px;position:absolute;top:14px;">Проспект Ленина, 63А/24 —
				Яндекс Карты</a>
			<iframe src="https://yandex.ru/map-widget/v1/?ll=83.778301%2C53.348416&mode=whatshere&no-distribution=1&whatshere%5Bpoint%5D=83.775382%2C53.348878&whatshere%5Bzoom%5D=17&z=14.64"
			        width="100%" height="600" frameborder="1" allowfullscreen="true" style="position:relative;">
			</iframe>
		</div>
	</div>
</main>
<footer class="footer__container">
	<div class="container">
		<nav class="footer-nav">
			<a class="logo__link" href="#"><img src="images/logo.svg" alt="логотип" class="logo"></a>
			<ul class="footer-list">
				<li class="footer-item">
					<a class="footer-link" href="index.html">О нас</a>
				</li>
				<li class="nav-item">
					<a class="footer-link" href="services.html">Туры</a>
				</li>
				<li class="nav-item">
					<a class="footer-link" href="#">Скидки</a>
				</li>
				<li class="nav-item">
					<a class="footer-link" href="#">Билеты</a>
				</li>
				<li class="nav-item">
					<a class="footer-link" href="yandex-map.html">Связатья с нами</a>
				</li>
			</ul>
		</nav>
	</div>
</footer>
</body>
</html>
